import { Ionicons } from "@expo/vector-icons";
import React from "react";
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

// 设置项数据
type IoniconName =
  | "notifications"
  | "language"
  | "moon"
  | "chatbox"
  | "star"
  | "help-circle"
  | "document-text"
  | "information-circle";

type SettingItemType = {
  id: string;
  icon: IoniconName;
  name: string;
  type: "switch" | "arrow";
  value?: boolean | string;
};

const settingsData: {
  title: string;
  items: SettingItemType[];
}[] = [
  {
    title: "通用",
    items: [
      {
        id: "1",
        icon: "notifications",
        name: "消息通知",
        type: "switch",
        value: true,
      },
      {
        id: "2",
        icon: "language",
        name: "语言设置",
        type: "arrow",
        value: "简体中文",
      },
      {
        id: "3",
        icon: "moon",
        name: "夜间模式",
        type: "switch",
        value: false,
      },
    ],
  },
  {
    title: "意见反馈",
    items: [
      {
        id: "4",
        icon: "chatbox",
        name: "反馈问题",
        type: "arrow",
      },
      {
        id: "5",
        icon: "star",
        name: "评价我们",
        type: "arrow",
      },
    ],
  },
  {
    title: "帮助",
    items: [
      {
        id: "6",
        icon: "help-circle",
        name: "使用指南",
        type: "arrow",
      },
      {
        id: "7",
        icon: "document-text",
        name: "隐私政策",
        type: "arrow",
      },
      {
        id: "8",
        icon: "information-circle",
        name: "关于我们",
        type: "arrow",
      },
    ],
  },
];

const SettingItem = ({
  item,
}: {
  item: (typeof settingsData)[0]["items"][0];
}) => {
  return (
    <TouchableOpacity
      style={{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: 16,
        paddingHorizontal: 20,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: "#eee",
      }}
      activeOpacity={0.7}
    >
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          gap: 12,
        }}
      >
        <Ionicons name={item.icon} size={20} color="#666" />
        <Text
          style={{
            fontSize: 16,
          }}
        >
          {item.name}
        </Text>
      </View>

      {item.type === "switch" ? (
        <Switch
          value={typeof item.value === "boolean" ? item.value : false}
          onValueChange={() => console.log(`切换 ${item.name}`)}
          trackColor={{ false: "#ddd", true: "#4CAF50" }}
        />
      ) : (
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            gap: 6,
          }}
        >
          {item.value && (
            <Text
              style={{
                color: "#999",
                fontSize: 14,
              }}
            >
              {item.value}
            </Text>
          )}
          <Ionicons name="chevron-forward" size={18} color="#999" />
        </View>
      )}
    </TouchableOpacity>
  );
};

export default function SettingsScreen() {
  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}
    >
      <Text
        style={{
          fontSize: 24,
          textAlign: "center",
          fontWeight: "bold",
          padding: 20,
          paddingBottom: 10,
        }}
      >
        设置
      </Text>
      <ScrollView
        contentContainerStyle={{
          paddingBottom: 30,
        }}
        showsVerticalScrollIndicator={false}
      >
        {settingsData.map((section, index) => (
          <View
            key={index}
            style={{
              marginBottom: 20,
            }}
          >
            <Text
              style={{
                fontSize: 16,
                color: "#888",
                paddingHorizontal: 20,
                paddingVertical: 8,
              }}
            >
              {section.title}
            </Text>
            <View
              style={{
                backgroundColor: "#fff",
                borderRadius: 12,
                marginHorizontal: 16,
                overflow: "hidden",
              }}
            >
              {section.items.map((item) => (
                <SettingItem key={item.id} item={item} />
              ))}
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}
